{% extends "base.html" %}
{% block title %}
    发布博客 - 分享你的想法
{% endblock %}
{% block head %}
    <!-- 加载jQuery via CDN -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <!-- 加载wangEditor via CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@5.1.23/dist/index.min.js"></script>
    <link rel="stylesheet" href="{% static 'css/pub_blog.css' %}">
    <script src="{% static 'js/pub_blog.js' %}"></script>
{% endblock %}

{% block main %}
<div class="container mt-6">
    <div class="row justify-content-center">
        <div class="col-md-9">
            <!-- 页面标题 -->
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-pink-500">
                    发布博客
                </h1>
                <p class="text-gray-600 mt-2">分享你的知识和见解</p>
            </div>
            
            <!-- 博客发布提示 -->
            <div class="blog-publishing-tips">
                <h5>发布提示</h5>
                <ul>
                    <li>请确保博客内容符合网站规范</li>
                    <li>选择合适的分类可以让更多读者找到您的文章</li>
                    <li>您可以使用编辑器上方的工具栏进行排版</li>
                    <li>发布后您可以在个人中心查看和管理您的博客</li>
                </ul>
            </div>
            
            <!-- 表单开始 -->
            <form id="blog-form" action="" method="post" class="mt-6">
                {% csrf_token %}
                
                <!-- 标题字段 -->
                <div class="form-group">
                    <label for="title" class="form-label required-field font-medium text-lg">博客标题</label>
                    <input 
                        type="text" 
                        id="title" 
                        name="title" 
                        class="form-control {% if form.title.errors %}is-invalid{% endif %}" 
                        placeholder="请输入一个吸引人的标题"
                        maxlength="100"
                        value="{{ form.title.value|default_if_none:'' }}"
                    >
                    {% if form.title.errors %}
                        <div class="error-message">
                            {% for error in form.title.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 分类选择 -->
                <div class="form-group">
                    <label for="category" class="form-label required-field">选择分类</label>
                    <select 
                        id="category" 
                        name="category" 
                        class="form-select {% if form.category.errors %}is-invalid{% endif %}">
                        <option value="">请选择博客分类</option>
                        {% for item in categories %}
                            <option value="{{ item.id }}" 
                                {% if form.category.value == item.id %}selected{% endif %}>
                                {{ item.name }}
                            </option>
                        {% endfor %}
                    </select>
                    {% if form.category.errors %}
                        <div class="error-message">
                            {% for error in form.category.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                    {% if not categories %}
                        <div class="error-message">
                            当前没有可用的分类，请联系管理员添加分类
                        </div>
                    {% endif %}
                </div>
                
                <!-- 内容编辑器 -->
                <div class="mb-4 form-group">
                    <label for="editor-container" class="form-label required-field">博客内容</label>
                    <div class="editor-wrapper">
                        <div id="toolbar-container"></div> <!-- 工具栏 -->
                        <div id="editor-container"></div> <!-- 编辑区域 -->
                    </div>
                    {% if form.content.errors %}
                        <div class="error-message">
                            {% for error in form.content.errors %}{{ error }}{% endfor %}
                        </div>
                    {% endif %}
                </div>
                
                <!-- 操作按钮 -->
                <div class="mb-4 text-end">
                    <a href="/" class="btn btn-secondary me-2">取消</a>
                    <button 
                        type="submit" 
                        class="btn btn-primary" 
                        id="submit-btn"
                        {% if not categories %}disabled{% endif %}
                    >
                        发布博客
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}